<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <style>
        .bg-f2 {
            background-color: #f8f9fa;
        }

        video {
            width: 320px;
            height: auto;
        }

        .videoRow {
            margin-top: 30px;
        }

        #previewLabel {
            display: block;
            position: absolute;
        }
    </style>
    <title class="thirdVideo">第三方音视频推流</title>
</head>
<body class="bg-f2">
<div class="container">

    <div class="my-3 p-3 bg-white rounded box-shadow small">

        <h6 class="border-bottom border-gray pb-2 mb-0 thirdVideo">第三方音视频推流</h6>

        <div class="row" style="margin-top:1%">

            <div class="col-sm">
                <div class="input-group input-group-sm mb-3">
                  <div class="input-group-prepend">
                    <label class="input-group-text" for="audioList"><strong class="text-gray-dark audioDevices">音频设备</strong></label>
                  </div>
                  <select class="custom-select" id="audioList" style="width: 50%">
                  </select>
                </div>
              </div>
      
              <div class="col-sm">
                <div class="input-group input-group-sm mb-3">
                  <div class="input-group-prepend">
                    <label class="input-group-text" for="videoList"><strong class="text-gray-dark videoDevices">视频设备</strong></label>
                  </div>
                  <select class="custom-select" id="videoList" style="width: 50%">
                  </select>
                </div>
              </div>
              
              <div class="col-sm">
                <div class="input-group input-group-sm mb-3">
                  <div class="input-group-prepend">
                    <label class="input-group-text" for="roomId"><strong class="text-gray-dark roomid">房间号</strong></label>
                  </div>
                  <input type="email" class="form-control d-inline" id="roomId" style="width: 75%; max-width: 200px"
                    aria-describedby="emailHelp" placeholder="please enter room ID">
                </div>
              </div>

        </div>
        <div class="row" style="margin-top:1%">
          <div class="col-sm">
            <div class="input-group input-group-sm mb-3">
              <div class="input-group-prepend">
                <label class="input-group-text" for="channelCount"><strong class="text-gray-dark channelCount">声道</strong></label>
              </div>
              <select class="custom-select" id="channelCount" style="width: 50%">
                <option value="1" class="channel1">默认</option>
                <option value="2" class="channel2">双声道</option>
              </select>
            </div>
          </div>
          <div class="col-sm">
            <div class="input-group input-group-sm mb-3">
              <div class="input-group-prepend">
                <label class="input-group-text" for="audioBitrate"><strong class="text-gray-dark">音频码率</strong></label>
              </div>
              <input type="email" class="form-control d-inline" id="audioBitrate"
                aria-describedby="emailHelp" placeholder="音频码率" value="">
            </div>
          </div>
          <div class="col-sm">
            <div class="input-group input-group-sm mb-3">
              <div class="input-group-prepend">
                <label class="input-group-text" for="audioBitrate"><strong class="text-gray-dark">推流格式</strong></label>
              </div>
              <input type="email" class="form-control d-inline" id="videoCodeType"
                aria-describedby="emailHelp" placeholder="推流格式" value="">
            </div>
          </div>
          <!-- <div class="col-sm">
            <div class="input-group input-group-sm mb-3">
              <div class="input-group-prepend">
                <label class="input-group-text" for="audioBitrate"><strong class="text-gray-dark">替换MP4</strong></label>
              </div>
              <input type="email" class="form-control d-inline" id="videoUrl"
                aria-describedby="emailHelp" placeholder="MP4视频连接" value="">
            </div>
          </div>      -->
        </div>
        <div class="row">
            <div class="col-sm">
                <button type="button" id="externalCaptureV" class="btn btn-primary btn-sm pushThird">推第三方视频</button>
                <button type="button" id="externalCaptureA" class="btn btn-primary btn-sm ">推第三方音频</button>
                <button type="button" id="openRoom" class="btn btn-primary btn-sm enterRoomPlay">进入房间（不推流）</button>
                <button type="button" id="changeUrl" class="btn btn-primary btn-sm">替换视频</button>
                <button type="button" id="leaveRoom" class="btn btn-secondary btn-sm leaveRoom">退出</button>
                <input type="file" class="" accept="video/*" id="inputFile" />
            </div>
        </div>

        <div class="row videoRow">
            <div class="col-sm">
                <label id="previewLabel" class="text-white"></label>
                <video id="previewVideo" autoplay muted playsinline controls></video>
                <video id="externerVideo" crossOrigin="anonymous" playsinline autoplay controls src="https://zego-public.oss-cn-shanghai.aliyuncs.com/sdk-doc/assets/big_buck_bunny.mp4" loop></video>
                <audio id="externerAudio" crossOrigin="anonymous" playsinline autoplay muted controls src="http://zego-public.oss-cn-shanghai.aliyuncs.com/sdk-doc/assets/bike.mp3" loop></audio>
            </div>
            <div class="col-sm remoteVideo">
                <!-- <video  autoplay muted playsinline></video> -->
            </div>
        </div>
    </div>

</div>


</body>

</html>
